<script>
import {BaseImgUrl, BaseURL} from '../../utils/lshttp'
import {getLoginCode, getNewsLoginCode, loginForSmsCode} from "../../services/login";
import {getImageCodeAPI, getUserInfoAPI} from "../../services/me";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import LszbgCountDown from "../../components/LszbgCountDown.vue";
export default {
  components: {LszbgCountDown},
  data() {
    return {
      userInfoStore: useUserInfoStore(),
      BaseImgUrl,
      BaseURL,
      // 表单注册
      changeForm:{
        tel: '',
        code: ''
      },
      codeText: "获取验证码",
      show: false, // 显示验证码
      verify: '', // 验证码
      verifyCodeImg: '', // 验证码图片
      countdown: 2592000, // 倒计时
      // 倒计时自定义样式
      timeStyle: {
        color: '#FF0B21',
        fontSize: '32rpx',
        padding: '6rpx 10rpx',
        margin: '0 10rpx',
        backgroundColor: '#ffffff',
        borderRadius: '4px'
      },
      timeColor: {
        color: '#FFFFFF'
      },
      /* 会员专属权利列表 */
      memberList: [
          {
            image: BaseImgUrl + '/share/share_register_item_img01.png',
            title: '美团/饿了么/京东隐藏优惠券',
            subTitle: `天天领最少<span style="color:#FF263A;font-size:32rpx;">1000元</span>`,
          },
          {
            image: BaseImgUrl + '/share/share_register_item_img02.png',
            title: '<span style="color:#FF263A;font-size:32rpx;">0元</span> 吃外卖霸王餐 ',
            subTitle: `奶茶甜点免费领,天天有返利`,
          },
          {
            image: BaseImgUrl + '/share/share_register_item_img03.png',
            title: '点外卖单单<span style="color:#FF263A;font-size:32rpx;">返现最高50%</span>',
            subTitle: '顿顿点，顿顿返，省钱根本停不下来！',
          }
      ]
    }
  },
  methods: {
    // 倒计时触发事件
    onChange(e) {
      this.timeData = e
    },
    // 立即注册事件
    phone_login: async function(){
      const that = this;
      // 手机号注册
      if (!that.changeForm.tel) {
        await uni.showToast({
          title: '手机号不能为空',
          icon: 'none',
          duration: 1500
        });
        return false;
      }
      if (!that.changeForm.code) {
        await uni.showToast({
          title: '验证码不能为空',
          icon: 'none',
          duration: 1500
        });
        return false;
      }
      const res = await loginForSmsCode(that.changeForm.tel, that.changeForm.code)
      await uni.showToast({
        title: res.msg,
        icon: 'none',
        duration: 1500
      })
      that.userInfoStore.setProfile(res.result)
      const resUser = await getUserInfoAPI()
      that.userInfoStore.setUserInfo(resUser.result)
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }, 2000)
    },
    // 验证码改变
    codeChange(text){
      this.codeText = text
    },

    // 获取验证码时
    getCode: async function(){
      let that = this
      if (that.changeForm.tel === '') {
        await uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      if (!that.verify){
        if (!(/^1[3456789]\d{9}$/.test(that.changeForm.tel))) {
          await uni.showToast({
            title: '手机号有误，请重填',
            icon: 'none'
          })
          return
        }
        that.show = true
        await that.Getverify()
      } else {
        if (that.$refs.uCode.canGetCode) {
          // 向后端请求验证码
          await uni.showLoading({
            title: '正在获取验证码'
          })
          const res = await getNewsLoginCode(that.changeForm.tel, that.verify)
          if(res.result.isSuccess){
            // 通知验证码组件内部开始倒计时
            that.$refs.uCode.start();
          }else{
            await uni.showToast({title: res.msg, icon: "none"})
            that.verify = ""
          }
        } else {
          uni.showToast({
            title: '倒计时结束后再发送',
            icon: 'none'
          })
        }
      }
    },
    // 获取图形验证码
    Getverify: async function(){
      let that = this
      const res = await getImageCodeAPI({
        tel: that.changeForm.tel || '',
        type: 'base64'
      })
      console.log('图形验证码=', res.result)
      that.verifyCodeImg = res.result.base64
    },
    // 微信一键登录
    wx_login(){
      uni.navigateTo({url: "/pages/login/login?&type=shareRegister"})
    },
    // 返回上一页面
    back(){
      uni.navigateBack()
    },
  }
}


</script>

<template>
    <view class="share_register">
      <view class="share_register_bg">
        <image :src="BaseImgUrl + '/share/share_register_bg.png'" mode="widthFix" class="share_register_bg_img"></image>
      </view>
      <!--头部navbar-->
      <view class="navbar">
        <u-status-bar></u-status-bar>
        <view class="navbar_box">
          <view class="back"><u-icon name="arrow-left" color="#ffffff" size="28" @click="back"></u-icon></view>
          <view class="title">注册领好礼</view>
        </view>
      </view>
      <view class="share_register_box">
        <!--倒计时-->
        <view class="share_register_box_warp">
          <view class="count_down">
            <lszbg-count-down before-text="距结束"
                              :is-hms="false"
                              :is-color="true"
                              :timeColor="timeColor"
                              :isTimeColor="true"
                              :timeStyle="timeStyle"
                              :time="countdown * 1000">
            </lszbg-count-down>
          </view>
        </view>
        <!--注册表单-->
        <view class="share_register_warp">
          <view class="warp_title">
            <view class="warp_left">
              <view class="title_text">注册免费领VIP会员</view>
              <view class="subtitle_text">31天新人权益、单单最多返<text style="color: #FC1326;">3元</text></view>
            </view>
            <view class="warp_right">
              <image :src="BaseImgUrl + '/share/share_register_title_img01.png'" mode="widthFix" class="warp_right_img"></image>
            </view>
          </view>
          <view class="warp_content">
            <view class="phone-input">
              <u-input fontSize="13" v-model="changeForm.tel" type="number" placeholderStyle="color: #b8b8b8"
                       placeholder="请输入手机号" border="none"/>
            </view>

            <view class="phone-input">
              <u-input style="width: 70%;" fontSize="13" v-model="changeForm.code" type="number" placeholderStyle="color: #b8b8b8"
                       placeholder="请输验证码" border="none"/>
              <view class="code-brn" @click="getCode">{{ codeText }}</view>
            </view>
            <u-code ref="uCode" @change="codeChange"></u-code>
            <view class="login-btn" @click="phone_login">立即注册</view>
            <view class="register_line">
              <u-line color="#E4E4E4" ></u-line>
              <view class="register_line_text">微信一键登录<text style="color:#FF0B21">0秒</text>注册</view>
            </view>
            <!--微信一键登录-->
            <view class="wx_login" @click="wx_login">
              <u-icon name="weixin-circle-fill" color="#50B674" size="32" ></u-icon>
            </view>
          </view>
        </view>
        <!--中间链接-->
        <view class="share_register_link">
          <view class="share_register_link_item">
            <view class="share_register_link_item_round"></view>
            <view class="share_register_link_item_long"></view>
            <view class="share_register_link_item_round"></view>
          </view>
          <view class="share_register_link_item">
            <view class="share_register_link_item_round"></view>
            <view class="share_register_link_item_long"></view>
            <view class="share_register_link_item_round"></view>
          </view>
        </view>
        <!--会员专属权益-->
        <view class="share_register_warp member">
          <view class="warp_title">
            <view class="warp_left">
              <view class="title_text">会员专属权益</view>
              <view class="subtitle_text">成为vip会员，解锁您的专属权益</view>
            </view>
            <view class="warp_right">
              <image :src="BaseImgUrl + '/share/share_register_title_img02.png'" mode="widthFix" class="warp_right_img"></image>
            </view>
          </view>
          <view class="warp_content">
            <view v-for="(item, index) in memberList" :key="index" class="member_item">
              <view class="member_item_content">
                <view class="member_item_img">
                  <image :src="item.image" style="width: 80rpx;height: 80rpx;"></image>
                </view>
                <view class="member_item_text">
                  <view class="member_item_text_title" v-html="item.title"></view>
                  <view class="member_item_text_subtitle" v-html="item.subTitle"></view>
                </view>
              </view>
              <u-line color="#E8E8E8"></u-line>
            </view>
          </view>
        </view>
      </view>
      <!--底部安全区域-->
      <view class="safe_area" style="padding-bottom: env(safe-area-inset-bottom);"></view>
    </view>

  <!--图片验证码弹窗-->
  <u-popup :show="show" mode="center" :round="10" @close="show = false">
    <view class="shadow_box">
      <view class="img_code">图形验证码：点击图片刷新</view>
      <view class="phone-input">
        <u-input style="width: 70%;" v-model="verify" type="number" border="none" placeholderStyle="color: #b8b8b8"
                 placeholder="请输图形验证码"/>
        <view class="code-brn2">
          <image @click="Getverify" :src="verifyCodeImg"></image>
        </view>
      </view>
      <view>
        <u-button type="primary" shape="square" @click="show=false">确定</u-button>
      </view>
    </view>
  </u-popup>
</template>

<style scoped lang="scss">
page {
  background: #F6F6F6;
}
.share_register {
  // background: linear-gradient( 180deg, #FD5B72 0%, #FDD9A2 100%);

  position: relative;
}
.share_register_bg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #FDD9A2;
  & .share_register_bg_img{
    width: 100%;
    height: 100%;
    /* width: 750rpx;
    height: 1624rpx; */
  }
}
/* navbar css */
.navbar{
  .navbar_box{
    position: relative;
    .back{
      width: 56rpx;
      height: 56rpx;
      padding: 12rpx;
      position: absolute;
      left: 0;
    }
    .title{
      width: 100%;
      line-height: 80rpx;
      font-size: 36rpx;
      color: #ffffff;
      text-align: center;
    }
  }

}
/* share_register_box css */
.share_register_box{
  padding: 20rpx;
  .share_register_box_warp{
    height: 260rpx;
    position: relative;
    & .count_down{
      position: absolute;
      bottom: 20rpx;
      left: 0;
    }
  }
  .share_register_warp{
    padding: 20rpx 30rpx;
    border-radius: 16rpx;
    background: linear-gradient( 180deg, #FFD5D5 0%, #FFFFFF 20%);
    .warp_title{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
      .warp_left{
        .title_text{
          font-size: 32rpx;
          font-weight: bold;
          line-height: 80rpx;
        }
        .subtitle_text{
          font-size: 26rpx;
          color: #666666;
        }
      }
      .warp_right{
        display: flex;
        align-items: center;
        .warp_right_img{
          width: 120rpx;
          height: 120rpx;
        }
      }
    }
    .warp_content{
      .phone-input {
        background: #FFFFFF;
        margin-bottom: 30rpx;
        padding: 15rpx 30rpx;
        border-radius: 10rpx;
        border: 1px solid #F7F8FA;
        display: flex;
        color: #666666;
        align-items: center;
        font-size: 26rpx;
        //box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.05);
        u-button {
          margin-left: auto;
        }
      }
      .login-btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        align-self: center;
        border-radius: 200rpx;
        background-image: linear-gradient( 113deg, #FF4E5E 0%, #FF9E5F 100%);
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #FFFFFF;
        margin: 30rpx auto 20rpx;
        box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.05);
      }
      .code-brn {
        width: 180rpx;
        color: #007AFF;
        padding: 10rpx 4rpx;
        text-align: center;
        font-size: 28rpx;
      }
      .register_line{
        position: relative;
        margin-top: 20rpx;
        padding-top: 20rpx;
        height: 40rpx;
        .register_line_text{
          position: absolute;
          left: 50%;
          top: 4rpx;
          height: 40rpx;
          padding: 0 20rpx;
          z-index: 1;
          transform: translateX(-50%);
          font-size: 24rpx;
          background: #FFFFFF;
        }
      }
      .wx_login{
        width: 100%;
        display: flex;
        justify-content: center;


      }
    }
  }
  .member{
    margin-top: -30rpx;

    .warp_title{
      & .warp_right{
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        margin-right: -20rpx;
        .warp_right_img{
          width: 140rpx;
          height: 140rpx;
        }
      }
    }
    .warp_content{
      padding-top: 10rpx;
    }
    .member_item{
      margin-bottom: 20rpx;
      .member_item_content{
        display: flex;
        margin-bottom: 20rpx;
        .member_item_img{
          width:80rpx;
          height:80rpx;
          margin-right: 20rpx;
        }
        .member_item_text{
          font-size: 28rpx;
          .member_item_text_title{
            font-size: 28rpx;
            color:#333333;
            padding-bottom: 10rpx;
          }
          .member_item_text_subtitle{
            font-size: 26rpx;
            color:#666666;

            .u_pares{
              width:100%;
              text{display: inline-block}
            }
          }
        }
      }
    }
  }
  /* 中间链接 */
  .share_register_link{
    width: 85%;
    position: relative;
    z-index: 10;
    margin: -40rpx auto 0;
    display: flex;
    justify-content: space-between;
    & .share_register_link_item{
      width: 20rpx;
      height: 90rpx;
      position: relative;
      & .share_register_link_item_round{
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #FD5C72;
        position: absolute;
      }
      & .share_register_link_item_round:first-child{
        top: 0;
      }
      & .share_register_link_item_round:last-child{
        bottom: 0;
      }
      & .share_register_link_item_long{
        width: 8rpx;
        height: 74rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
        position: absolute;
        left: 50%;
        top: 8rpx;
        transform: translateX(-50%);
        z-index: 10;
      }
    }
  }
}
/* 图形验证码弹窗scc */
.shadow_box {
  box-sizing: border-box;
  padding: 60rpx 40rpx;

  .img_code {
    font-size: 28rpx;
    font-weight: bold;
  }
  .phone-input {
    background-color: #F7F8FA;
    margin: 30rpx 0;
    padding: 10rpx 30rpx;
    border-radius: 200rpx;
    border: 1px solid #F7F8FA;
    display: flex;
    color: #666666;
    align-items: center;

    .inputWidth {
      width: 100%;
    }

    //box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.05);
    u-button {
      margin-left: auto;
    }
  }
  .code-brn2 {
    width: 200rpx;
    height: 70rpx;
    color: #007AFF;
    padding: 0 4rpx;
    text-align: center;

    image {
      width: 200rpx;
      height: 70rpx;
    }
  }
}
</style>
